<template>
  <div class="min-h-screen">
    <!-- Hero Section -->
    <section class="relative bg-blue-900 text-white py-24">
      <div class="absolute inset-0" :style="backgroundStyle">
        <div class="absolute inset-0 bg-gradient-to-r from-blue-900 to-blue-800 opacity-90"></div>
      </div>
      <div class="relative container mx-auto px-4">
        <div class="max-w-3xl mx-auto text-center" v-animate="{ type: 'fade', duration: 1000, delay: 200 }">
          <h1 class="text-4xl sm:text-5xl font-bold mb-6">
            专业的技术服务
          </h1>
          <TypeWriter
            :text="['Web应用开发', '移动应用开发', '人工智能解决方案', '云服务部署']"
            :delay="2000"
            class="text-xl text-blue-300 mb-4"
          />
          <p class="text-xl text-gray-200 mb-8">
            为企业提供全方位的技术解决方案，助力企业实现数字化转型
          </p>
        </div>
      </div>
    </section>

    <!-- Services Grid -->
    <section class="py-20 bg-white dark:bg-gray-900">
      <div class="container mx-auto px-4">
        <div class="max-w-3xl mx-auto text-center mb-16" v-animate="{ type: 'slide', duration: 800, delay: 300 }">
          <h2 class="text-3xl font-bold mb-4 text-gray-800 dark:text-white">我们的服务</h2>
          <p class="text-gray-700 dark:text-gray-300">专业、高效、创新的技术解决方案</p>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          <div v-for="(service, index) in services" :key="service.title"
            v-animate="{ type: 'scale', duration: 800, delay: index >= 0 ? 300 * (index + 1) : 300 }"
            class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition duration-300 border border-gray-100 dark:border-gray-700">
            <div class="aspect-w-16 aspect-h-9 relative">
              <img 
                :src="service.image" 
                :alt="service.title" 
                class="object-cover w-full h-full transition-opacity duration-300"
                :class="{ 'opacity-0': !isImageLoaded(service.title), 'opacity-100': isImageLoaded(service.title) }"
                loading="lazy"
                decoding="async"
                @load="handleImageLoad(service.title)"
              >
              <div 
                v-show="!isImageLoaded(service.title)"
                class="absolute inset-0 bg-gray-200 dark:bg-gray-700 animate-pulse"
              ></div>
            </div>
            <div class="p-6">
              <h3 class="text-xl font-semibold mb-3 text-gray-800 dark:text-white">{{ service.title }}</h3>
              <p class="text-gray-700 dark:text-gray-300 mb-4">{{ service.description }}</p>
              <ul class="space-y-2 mb-6">
                <li v-for="feature in service.features" :key="feature" class="flex items-center text-gray-700 dark:text-gray-300">
                  <svg class="w-5 h-5 text-blue-600 dark:text-blue-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                  </svg>
                  {{ feature }}
                </li>
              </ul>
              <button @click="handleLearnMore(service)"
                class="w-full px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition duration-300">
                了解更多
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Process Section -->
    <section class="py-20 bg-blue-50 dark:bg-gray-800">
      <div class="container mx-auto px-4">
        <div class="max-w-3xl mx-auto text-center mb-16">
          <h2 class="text-3xl font-bold mb-4 text-gray-800 dark:text-white">服务流程</h2>
          <p class="text-gray-700 dark:text-gray-300">专业规范的服务流程，确保项目顺利交付</p>
        </div>
        <div class="relative">
          <div class="absolute top-1/2 left-0 w-full h-1 bg-blue-200 dark:bg-blue-900"></div>
          <div class="relative grid grid-cols-1 md:grid-cols-4 gap-8">
            <div v-for="(step, index) in process" :key="index" class="relative">
              <div class="bg-white dark:bg-gray-700 rounded-lg p-6 shadow-lg border border-blue-100 dark:border-gray-600">
                <div class="w-12 h-12 bg-blue-600 text-white rounded-full flex items-center justify-center text-xl font-bold mb-4 mx-auto">
                  {{ index + 1 }}
                </div>
                <h3 class="text-lg font-semibold text-center mb-2 text-gray-800 dark:text-white">{{ step.title }}</h3>
                <p class="text-gray-700 dark:text-gray-300 text-center">{{ step.description }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Industries Section -->
    <section class="py-20 bg-white dark:bg-gray-900">
      <div class="container mx-auto px-4">
        <div class="max-w-3xl mx-auto text-center mb-16">
          <h2 class="text-3xl font-bold mb-4 text-gray-800 dark:text-white">行业解决方案</h2>
          <p class="text-gray-700 dark:text-gray-300">针对不同行业特点，提供专业的解决方案</p>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          <div v-for="industry in industries" :key="industry.title"
            class="group relative overflow-hidden rounded-lg shadow-lg border border-gray-100 dark:border-gray-700">
            <div class="aspect-w-16 aspect-h-9 relative">
              <img 
                :src="industry.image" 
                :alt="industry.title" 
                class="object-cover w-full h-full transition-opacity duration-300"
                :class="{ 'opacity-0': !isImageLoaded(industry.title), 'opacity-100': isImageLoaded(industry.title) }"
                loading="lazy"
                decoding="async"
                @load="handleImageLoad(industry.title)"
              >
              <div 
                v-show="!isImageLoaded(industry.title)"
                class="absolute inset-0 bg-gray-200 dark:bg-gray-700 animate-pulse"
              ></div>
            </div>
            <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent p-6 flex flex-col justify-end">
              <h3 class="text-xl text-white font-semibold mb-2">{{ industry.title }}</h3>
              <p class="text-gray-300">{{ industry.description }}</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- CTA Section -->
    <section class="py-20 bg-blue-600 dark:bg-blue-800 text-white">
      <div class="container mx-auto px-4">
        <div class="max-w-4xl mx-auto text-center">
          <h2 class="text-3xl sm:text-4xl font-bold mb-6">需要专业的技术服务？</h2>
          <p class="text-xl mb-8 text-white/90 dark:text-white/80">联系我们，获取专业的技术支持和解决方案</p>
          <div class="flex flex-wrap justify-center gap-4">
            <button @click="showContactDialog" class="px-8 py-3 bg-white dark:bg-gray-100 text-blue-600 dark:text-blue-800 rounded-lg font-semibold hover:bg-gray-100 dark:hover:bg-white transition duration-300">
              联系我们
            </button>
            <button @click="showMoreInfoDialog" class="px-8 py-3 border-2 border-white dark:border-white/90 text-white rounded-lg font-semibold hover:bg-white hover:text-blue-600 dark:hover:bg-gray-100 dark:hover:text-blue-800 transition duration-300">
              了解更多
            </button>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
import { usePageData, usePageBackground } from '@/composables'
import { inject, ref } from 'vue'
import TypeWriter from '@/components/TypeWriter.vue'

const { services: pageServices } = usePageData()
const { backgroundStyle } = usePageBackground('services')

const services = pageServices?.services || []
const industries = pageServices?.industries || []
const loadedImages = ref(new Set())

const handleImageLoad = (id) => {
  loadedImages.value.add(id)
}

const isImageLoaded = (id) => loadedImages.value.has(id)

const dialog = inject('dialog')

const handleLearnMore = async (service) => {
  try {
    const message = `${service.description}\n\n主要特点：\n${service.features.join('\n- ')}`
    await dialog.open('demo', {
      title: service.title,
      message: message
    })
  } catch (err) {
    // 用户取消或关闭对话框
  }
}

const process = [
  {
    title: '需求分析',
    description: '深入了解客户需求，制定合适的解决方案'
  },
  {
    title: '方案设计',
    description: '专业团队设计最优技术方案'
  },
  {
    title: '开发实施',
    description: '高效开发，定期汇报项目进度'
  },
  {
    title: '测试交付',
    description: '严格测试，确保产品质量'
  }
]

const projects = [
  {
    title: '智慧金融平台',
    description: '为某大型银行开发的智能风控和数据分析平台',
    image: 'https://pics0.baidu.com/feed/a8ec8a13632762d0e0e3807bcb3e5bf7533dc644.jpeg',
    tags: ['金融科技', 'AI', '大数据']
  },
  {
    title: '电商管理系统',
    description: '为电商企业打造的一站式运营管理系统',
    image: 'https://pics5.baidu.com/feed/b3b7d0a20cf431ad911a4dd39f5c4b372f2e9509.jpeg',
    tags: ['电商', '管理系统', '云服务']
  },
  {
    title: '在线教育平台',
    description: '集直播、录播、作业管理于一体的教育平台',
    image: 'https://pics4.baidu.com/feed/9825bc315c6034a8c0f0f7e7498408cc0b2376c3.jpeg',
    tags: ['教育科技', '直播', '在线学习']
  }
]

const showContactDialog = async () => {
  try {
    await dialog.open('contact', {
      title: '联系我们',
      message: '欢迎联系我们获取更多信息！\n\n电话：+86-XXX-XXXX-XXXX\n邮箱：contact@example.com',
      showCancel: false
    })
  } catch (err) {
    // User cancelled or closed dialog
  }
}

const showMoreInfoDialog = async () => {
  try {
    await dialog.open('demo', {
      title: '技术服务详情',
      message: '我们提供全方位的技术服务，包括：\n\n- Web应用开发\n- 移动应用开发\n- 人工智能解决方案\n- 云服务部署\n\n我们的团队拥有丰富的项目经验，致力于为客户提供最优质的服务。',
      showCancel: false
    })
  } catch (err) {
    // User cancelled or closed dialog
  }
}
</script>
